<script setup>
import { onMounted, ref } from 'vue'
import Panel from './components/Panel.vue'
let map = ref(null)
onMounted(() => {
  map.value = new BMapGL.Map('map-container') // 创建地图实例

  const defaultLng = (import.meta.env.VITE_DEFAULT_LNG || 116.404) * 1
  const defaultLat = (import.meta.env.VITE_DEFAULT_LAT || 39.915) * 1
  let point = new BMapGL.Point(defaultLng, defaultLat) // 创建点坐标

  map.value.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别

  map.value.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
  let cityCtrl = new BMapGL.CityListControl() // 添加城市列表控件
  map.value.addControl(cityCtrl)

  map.value.addEventListener('click', function (e) {
    console.log('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat)
  })
})
</script>

<template>
  <div id="map-container"></div>
  <panel :map="map" v-if="map" />
</template>

<style></style>
